@import './variable';

.luna-console {
  background: var(--background);
}

@mixin luna-console-highlight {
  .luna-console-key {
    color: var(--var-color);
  }
  .luna-console-number {
    color: var(--number-color);
  }
  .luna-console-null {
    color: var(--operator-color);
  }
  .luna-console-string {
    color: var(--string-color);
  }
  .luna-console-boolean {
    color: var(--keyword-color);
  }
  .luna-console-special {
    color: var(--operator-color);
  }
  .luna-console-keyword {
    color: var(--keyword-color);
  }
  .luna-console-operator {
    color: var(--operator-color);
  }
  .luna-console-comment {
    color: var(--comment-color);
  }
}

.luna-console-header {
  color: var(--link-color);
  border-bottom-color: var(--border);
}

.luna-console-nesting-level {
  border-right-color: var(--border);
  &::before {
    border-bottom-color: var(--border);
  }
}

.luna-console-log-container {
  &.luna-console-selected {
    .luna-console-log-item {
      background: var(--contrast);
      &:not(.luna-console-error):not(.luna-console-warn) {
        border-color: var(--border);
      }
    }
  }
}

.luna-console-log-item {
  border-bottom-color: var(--border);
  color: var(--foreground);
  a {
    color: var(--link-color) !important;
  }
  .luna-console-icon-container {
    .luna-console-icon {
      color: var(--foreground);
    }
    .luna-console-icon-error {
      color: #ef3842;
    }
    .luna-console-icon-warn {
      color: #e8a400;
    }
  }
  .luna-console-count {
    color: var(--select-foreground);
    background: var(--highlight);
  }
  &.luna-console-warn {
    color: var(--console-warn-foreground);
    background: var(--console-warn-background);
    border-color: var(--console-warn-border);
  }
  &.luna-console-error {
    background: var(--console-error-background);
    color: var(--console-error-foreground);
    border-color: var(--console-error-border);
    .luna-console-count {
      background: var(--console-error-foreground);
    }
  }
  .luna-console-code {
    @include luna-console-highlight();
  }
  .luna-console-log-content {
    .luna-console-undefined,
    .luna-console-null {
      color: var(--operator-color);
    }
    .luna-console-number {
      color: var(--number-color);
    }
    .luna-console-boolean {
      color: var(--keyword-color);
    }
    .luna-console-symbol,
    .luna-console-regexp {
      color: var(--var-color);
    }
  }
}

.luna-console-preview {
  @include luna-console-highlight();
}

.luna-object-viewer {
  color: var(--primary);
  font-size: 12px !important;
}
.luna-object-viewer-null {
  color: var(--operator-color);
}
.luna-object-viewer-string,
.luna-object-viewer-regexp {
  color: var(--string-color);
}
.luna-object-viewer-number {
  color: var(--number-color);
}
.luna-object-viewer-boolean {
  color: var(--keyword-color);
}
.luna-object-viewer-special {
  color: var(--operator-color);
}
.luna-object-viewer-key,
.luna-object-viewer-key-lighter {
  color: var(--var-color);
}
.luna-object-viewer-expanded:before {
  border-color: transparent;
  border-top-color: var(--foreground);
}
.luna-object-viewer-collapsed:before {
  border-top-color: transparent;
  border-left-color: var(--foreground);
}

.luna-notification {
  pointer-events: none !important;
  padding: $padding;
  z-index: 1000;
}

.luna-notification-item {
  z-index: 500;
  color: var(--foreground);
  background: var(--background);
  box-shadow: none;
  padding: 5px 10px;
  border: 1px solid var(--border);
}

.luna-notification-upper {
  margin-bottom: 10px;
}

.luna-notification-lower {
  margin-top: 10px;
}

.luna-data-grid {
  color: var(--foreground);
  background: var(--background);
  border-color: var(--border);
  &:focus {
    .luna-data-grid-data-container {
      .luna-data-grid-node.luna-data-grid-selected {
        background: var(--accent);
      }
    }
  }
  th,
  td {
    border-color: var(--border);
  }
  th {
    background: var(--darker-background);
    &.luna-data-grid-sortable {
      &:hover,
      &:active {
        color: var(--select-foreground);
        background: var(--highlight);
      }
    }
  }
  .luna-data-grid-data-container {
    .luna-data-grid-node.luna-data-grid-selected {
      background: var(--highlight);
    }
    tr:nth-child(even) {
      background: var(--contrast);
    }
  }
}

.luna-dom-viewer {
  color: var(--foreground);
  .luna-dom-viewer-html-tag,
  .luna-dom-viewer-tag-name {
    color: var(--tag-name-color);
  }
  .luna-dom-viewer-attribute-name {
    color: var(--attribute-name-color);
  }
  .luna-dom-viewer-attribute-value {
    color: var(--string-color);
  }
  .luna-dom-viewer-html-comment {
    color: var(--comment-color);
  }
  .luna-dom-viewer-tree-item {
    &:hover {
      .luna-dom-viewer-selection {
        background: var(--contrast);
      }
    }
    &.luna-dom-viewer-selected {
      .luna-dom-viewer-selection {
        background: var(--highlight);
      }
    }
    &.luna-dom-viewer-selected:focus {
      .luna-dom-viewer-selection {
        background: var(--accent);
        opacity: 0.2;
      }
    }
  }
  .luna-dom-viewer-text-node {
    .luna-dom-viewer-key {
      color: var(--var-color);
    }
    .luna-dom-viewer-number {
      color: var(--number-color);
    }
    .luna-dom-viewer-null {
      color: var(--operator-color);
    }
    .luna-dom-viewer-string {
      color: var(--string-color);
    }
    .luna-dom-viewer-boolean {
      color: var(--keyword-color);
    }
    .luna-dom-viewer-special {
      color: var(--operator-color);
    }
    .luna-dom-viewer-keyword {
      color: var(--keyword-color);
    }
    .luna-dom-viewer-operator {
      color: var(--operator-color);
    }
    .luna-dom-viewer-comment {
      color: var(--comment-color);
    }
  }
}

.luna-dom-viewer-children {
  margin: 0;
  padding-left: 15px !important;
}

.luna-modal {
  z-index: 9999999;
}

.luna-modal-body,
.luna-modal-input {
  color: var(--foreground);
  background: var(--background);
}

.luna-modal-input {
  user-select: text !important;
  border-color: var(--border);
}

.luna-modal-button-group {
  .luna-modal-secondary {
    border-color: var(--border);
    color: var(--foreground);
    background: var(--background);
  }
  .luna-modal-primary {
    background: var(--accent);
  }
  .luna-modal-button {
    &:active {
      &::before {
        background: var(--accent);
      }
    }
  }
}

.luna-tab {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--foreground);
  background: var(--darker-background);
}

.luna-tab-tabs-container {
  border-color: var(--border);
}

.luna-tab-item {
  &.luna-tab-selected,
  &:hover {
    background: var(--highlight);
    color: var(--select-foreground);
  }
}

.luna-tab-slider {
  background: var(--accent);
}

.luna-text-viewer {
  color: var(--foreground);
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--background);
  font-size: $font-size-s;
  .luna-text-viewer-line-text {
    user-select: text;
    * {
      user-select: text;
    }
  }
  .luna-text-viewer-copy,
  .luna-text-viewer-line-number {
    border-color: var(--border);
  }
  .luna-text-viewer-copy .luna-text-viewer-icon-check {
    color: var(--accent);
  }
  .luna-text-viewer-copy {
    background-color: var(--background);
  }
}

.luna-setting {
  color: var(--foreground);
  background: var(--background);
}

.luna-setting-item {
  &:hover,
  &.luna-setting-selected {
    background: var(--darker-background);
  }
  &.luna-setting-selected:focus {
    outline: none;
  }
}

.luna-setting-item-title {
  font-size: $font-size;
}

.luna-setting-item-separator {
  border-color: var(--border);
}

.luna-setting-item-checkbox {
  input {
    border-color: var(--border);
    &:checked {
      background-color: var(--accent);
      border-color: var(--accent);
    }
  }
}

.luna-setting-item-select {
  .luna-setting-select {
    select {
      color: var(--foreground);
      border-color: var(--border);
      background: var(--background);
    }
    &:after {
      border-top-color: var(--foreground);
    }
  }
}

.luna-setting-item-button {
  button {
    color: var(--accent);
    background: var(--background);
    border-color: var(--border);
    &:hover,
    &:active {
      background: var(--darker-background);
    }
    &:active {
      border: 1px solid var(--accent);
    }
  }
}

.luna-setting-item-number {
  .luna-setting-range-container {
    .luna-setting-range-track {
      .luna-setting-range-track-bar {
        background: var(--border);
        .luna-setting-range-track-progress {
          background: var(--accent);
        }
      }
    }
    input::-webkit-slider-thumb {
      border-color: var(--border);
      background: radial-gradient(
        circle at center,
        var(--dark) 0,
        var(--dark) 15%,
        var(--light) 22%,
        var(--light) 100%
      );
    }
  }
}

.luna-box-model {
  background: transparent;
}

.luna-box-model-position {
  color: var(--foreground);
}
